<template>
  <el-container>
    <el-header id="Header">
      <el-row id="Control" :gutter="10">
        <!--过滤参数选择-->
        <el-col :span="6">
          <span id="FilterParameters">过滤参数：</span>
          <el-select id="FilterBox" v-model="FilterParameter_value" placeholder="请选择" title="过滤参数:">
            <el-option
              v-for="item in FilterParameters"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <!--查找输入框-->
        <el-col :span="1">
          <span id="Value">值：</span>
        </el-col>
        <el-col :span="4">
          <el-input v-model="CompleteValue" placeholder="请输入内容" />
        </el-col>
        <!--查找、新增功能按钮-->
        <el-col :span="13">
          <el-button id="Find" type="primary" @click=" Find()">过滤</el-button>
          <el-button id="recover" type="primary" @click="$event => dealData()">取消过滤</el-button>
          <el-button id="Add" type="success" @click="AddVisible = true">新增</el-button>
            <!--新增按钮的弹窗-->
        </el-col>
      </el-row>
    </el-header>
    <el-main id="Main" :style="myStyle">
      <el-table
        :data="tableData"
        height="100%"
        border
        style="width: 87.8rem"
        :cell-class-name="tableCellClassName"
        @cell-mouse-enter="getNowRow"
      >
        <!--序号-->
        <el-table-column
          width="50"
          type="index"
          label="序号"
        />
        <!--设备id-->
        <el-table-column
          prop="id"
          label="设备ID"
        />
        <!--所属区域-->
        <el-table-column
          prop="guid"
          label="设备序列号"
        />
        <!--电话-->
        <el-table-column
          prop="areaId"
          label="所属区域ID"
        />
        <!--邮箱-->
        <el-table-column
          prop="name"
          label="设备名称"
        />
        <!--操作栏-->
        <el-table-column
          label="操作"
          width="270"
        >
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="7">
                <el-button type="primary" @click="ReviseVisible = true,dealReviseData(scope.row)">修改</el-button>
              </el-col>
              <el-col :span="7">
                <el-button type="danger" @click="$event => delProbe(scope.row.id)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer id="Footer">
      <!--分页功能-->
      <!--当前行数与总数据条数-->
      <el-row>
        <el-col :span="10">
          <div id="now_line_number">第 {{ nowRow }} 条/共 {{ totalNumber }} 条数据</div>
        </el-col>
        <el-col :span="14">
          <div>
            <el-pagination
              id="controlBigPosition"
              background
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200, 300]"
              :page-size="size"
              layout="sizes, prev, pager, next, jumper"
              :total="totalNumber"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button id="controlPosition" type="primary" round>跳转</el-button>
          </div>
        </el-col>
      </el-row>
    </el-footer>

    <!--新增设备弹窗-->
    <el-dialog top="30vh" title="新增设备" :visible.sync="AddVisible" width="23%">
      <el-form ref="AddForm" :model="AddForm" label-width="90px">
        <el-form-item label="设备序列号">
          <el-input
            v-model="AddForm.probeID"
            style="width: 198px;"
          />
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input
            v-model="AddForm.name"
            style="width: 198px;"
          />
        </el-form-item>
        <el-form-item label="区域设置">
          <el-input v-model="AddForm.region" disabled="false" placeholder="请在右侧区域框选择绑定"></el-input>
        </el-form-item>
        <div v-show="tableCustomerVisible" id="targetTable">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-tooltip class="item" effect="dark" content="输入区域名称进行查询" placement="top">
                <el-input v-model="RegionForm.searchRegionKeyword" placeholder="查询输入" />
              </el-tooltip>
            </el-col>
          </el-row>
          <el-table
            :data="RegionForm.searchRegionInfos"
            height="315"
            border
            style="width: 100%"
          >
          <el-table-column
          prop="id"
          label="区域ID"
          >
          </el-table-column>
          <el-table-column
          prop="name"
          label="区域名称">
          </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="binding(scope.row,'add')">绑定</el-button>
          </template>
        </el-table-column>
          </el-table>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="AddVisible = false,Cancel()">取 消</el-button>
        <el-button type="primary" @click="AddVisible = false,addProbe()">确 定</el-button>

      </span>
    </el-dialog>

    <!-- 修改设备弹窗 -->
    <el-dialog top="20vh" title="修改设备信息" :visible.sync="ReviseVisible" width="30%">
      <el-form ref="ReviseForm" :model="ReviseForm" label-width="80px">
        <el-form-item label="设备ID">
          <el-input v-model="ReviseForm.probeId" disabled="false" />
        </el-form-item>
        <el-form-item label="区域设置">
          <el-input v-model="ReviseForm.region" disabled="false" placeholder="请在右侧区域框选择绑定"></el-input>
        </el-form-item>
        <div v-show="tableCustomerVisible" id="targetTable">
          <el-row :gutter="30">
            <el-col :span="24">
              <el-tooltip class="item" effect="dark" content="输入区域名称进行查询" placement="top">
                <el-input v-model="RegionForm.searchRegionKeyword" placeholder="查询输入" />
              </el-tooltip>
            </el-col>
          </el-row>
          <el-table
            :data="RegionForm.searchRegionInfos"
            height="260"
            border
            style="width: 100%"
          >
          <el-table-column
          prop="id"
          label="区域ID"
          >
          </el-table-column>
          <el-table-column
          prop="name"
          label="区域名称">
          </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="binding(scope.row,'revise')">绑定</el-button>
          </template>
        </el-table-column>
          </el-table>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ReviseVisible = false,Cancel()">取 消</el-button>
        <el-button type="primary" @click="ReviseVisible = false,reviseConfirm()">确 定</el-button>
      </span>
    </el-dialog>

  </el-container>
</template>

<script>
import { 
  getAllProbes, AddProbe, DelProbe, searchProbeByProbeId, searchProbeByUserId, searchProbeByareaId,
  searchProbeByareaName
} from '@/api/probeManager.js'
import { searchAreaById } from '@/api/areaManager.js'
import { getAllRegion } from '@/api/userManager'
export default {
  name: 'Equipment',
  data() {
    return {
      myStyle: {
        height: '29rem'
      },
      controlWidth: {
        width: '100%'
      },
      //* ******************控制区*******************
      // 过滤参数
      FilterParameters: [
        {
          value: 'probeID',
          label: '设备ID'
        }, {
          value: 'areaID',
          label: '所属区域ID'
        }, {
          value: 'UserId',
          label: '所属用户ID'
        }],
      // 过滤参数
      FilterParameter_value: '',
      // 查找输入框
      CompleteValue: '',
      // 用于显示弹窗
      AddVisible: false, // 添加
      ReviseVisible: false, // 修改
      // 弹窗的内容
      AddForm: {
        probeID: '',
        areaID: '',
        region:'',
        name:''
        
      },
      ReviseForm: {
        probeID: '',
        areaID: '',
        region:'',
        name:''
      },
      tableCustomerVisible: true,
      RegionForm: {
        searchRegionKeyword: '',
        searchRegionInfos: [],
        allRegionInfos: []
      },
      // 下拉框
      // Roles:[],
      //* ******************中间主体*******************
      // 表格数据
      tableData: [],
      //* ******************分页尾部*******************
      // 分页
      // currentPage进入的第一页是第几页
      currentPage: 1,
      pageSize: 20,
      // 当前行数
      nowRow: 1,
      // 数据总数
      totalNumber: '',
      // 当前页面显示最大数量
      size: 20,
      userName: '',
      account: '',
      BindCustomerList: [],
      UnBindCustomerList: [],
      nowUserId: '',
      selectEventList: []
    }
  },
  watch: {
    // 区域过滤
    'RegionForm.searchRegionKeyword': {
      immediate: true,
      handler(val){
        this.RegionForm.searchRegionInfos = this.RegionForm.allRegionInfos.filter(p => {
          return p.name.indexOf(val) !== -1
        })
      }
    },
  },
  mounted() {
    this.myStyle = {
      height: document.body.clientHeight - 50 - 30 - 64 - 70 + 'px'
    }
    
    // 获取所有设备信息
    getAllProbes(this.currentPage, this.pageSize).then(request => {
      console.log(request);
      this.tableData = request.data.records
      this.totalNumber = request.data.total
    })
    getAllRegion(1, 99999).then(request => {
      this.RegionForm.allRegionInfos = request.data.records;
      this.RegionForm.searchRegionInfos = request.data.records;
    })
    // GetUserInfo().then(request=>{
    //   if(request.data.body){
    //     this.userName = request.data.body.userName;
    //     this.account = request.data.body.account;
    //   }else{
    //     super.$message({
    //       message: request.data.msg,
    //       type: 'warning'
    //     });
    //   }
    // });
    // OpSysRoleGetRoleList().then(request=>{
    //   for(let i=0;i<request.data.body.length;i++){
    //     let obj = {
    //       value: request.data.body[i].roleId,
    //       label: request.data.body[i].roleName
    //     };
    //     this.Roles.push(obj)
    //   }
    // });
    // this.dealData();
  },
  methods: {
    //* ***********************分页************************
    // 处理页面初始数据
    dealData() {
      getAllProbes(this.currentPage, this.pageSize).then(request => {
        console.log(request);
        this.tableData = request.data.records
        this.totalNumber = request.data.total
      })
      this.FilterParameter_value = '';
      this.CompleteValue='';
    },
    // 鼠标放到某一行上就触发
    tableCellClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 鼠标放到某一行上就触发
    getNowRow(row) {
      this.nowRow = row.index + 1 + (this.currentPage - 1) * this.size
    },
    // 每页最大条数
    handleSizeChange(val) {
      this.size = val
      this.currentPage = 1
      this.Find()
    },
    // 当前页数
    handleCurrentChange(val) {
      this.currentPage = val
      this.Find()
    },
    //* ***********************新增与查找按钮************************
    // 新增功能弹窗的取消和确认
    Cancel() {
      this.$message('取消成功')
    },

    //新增设备
    addProbe(){
      let addProbeData = {       
        "areaId": this.AddForm.areaId,
        "deviceType": "",
        "probeGuid": this.AddForm.probeID,
        "probeName": this.AddForm.name
      }
      AddProbe(addProbeData).then(request =>{
        if (request.succeess) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        } else {
          this.$message({
            message: request.data,
            type: 'warning'
        })
      }
    })
  },
   delProbe(id){
    DelProbe(id).then(request => {
          if (request.success) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })} else {
            this.$message({
              message: request.data,
              type: 'warning'
            })
          }
          })
   },
    //绑定
    binding(row, str){
      if(str=='add'){
        this.AddForm.region = row.name,
        this.AddForm.areaId = row.id
      }
      else if(str=='revise'){
        this.ReviseForm.region = row.name,
        this.ReviseForm.areaId = row.id
      }
    },
    // 查找按钮的事件
    Find() {
      // 设备ID
      if (this.FilterParameter_value === 'probeID') {
        // console.log('Complete', this.CompleteValue);
        searchProbeByProbeId(this.CompleteValue).then(request =>{
          // console.log('111',request);
          this.tableData = [request.data]
        })
      }
      // 区域ID
      else if (this.FilterParameter_value === 'areaID') {
        searchProbeByareaId(this.CompleteValue, this.currentPage, this.pageSize).then(request =>{
          console.log('111',request);
          this.totalNumber = request.data.total
          this.tableData = request.data.records
        })
      }
      // 用户ID
      else if (this.FilterParameter_value === 'UserId') {
        searchProbeByUserId(this.CompleteValue).then(request =>{
          this.tableData = request.data.probes
        })
      }
      // 邮箱
      else if (this.FilterParameter_value === 'areaName') {
        // searchProbeByareaName(this.CompleteValue).then(request =>{
        //   // this.tableData = 
        // })
      } else {
        this.dealData()
      }
    },
    //* ***********************修改、删除按钮************************
    // 新增、修改、删除后的表数据返回到以下两个函数
    // createConfirm(){
    //   OpUserCreate(this.AddForm).then(request=>{
    //     if(request.data.body){
    //       this.AddForm = {
    //         nickName:'',
    //         account:'',
    //         password:'',
    //         roleId:''
    //       };
    //       this.dealData();
    //       this.$message({
    //         message: '新增成功',
    //         type: 'success'
    //       });
    //     }else {
    //       super.$message({
    //         message: request.data.msg,
    //         type: 'warning'
    //       });
    //     }
    //   })
    // },
    dealReviseData(row){
      this.ReviseForm.probeId = row.id;

    },
    // reviseConfirm(){
    //   OpUserUpdate(this.ReviseForm).then(request=>{
    //     if(request.data.body){
    //       this.dealData();
    //       this.$message({
    //         message: '修改成功',
    //         type: 'success'
    //       });
    //     }else {
    //       super.$message({
    //         message: request.data.msg,
    //         type: 'warning'
    //       });
    //     }
    //   })
    // },
    // Del(row){
    //   this.$confirm("是否删除", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       OpUserDelete(row.userId).then(request=>{
    //         if(request.data.body){
    //           this.dealData();
    //           this.$message({
    //             message: '删除成功',
    //             type: 'success'
    //           });
    //         }else{
    //           super.$message({
    //             message: request.data.msg,
    //             type: 'warning'
    //           });
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    // getCustomerInfo(row){
    //   if(this.nowUserId !== row){
    //     this.nowUserId = row.userId;
    //   }
    //   getUserCustomerPageList(this.nowUserId,1,1000).then(request=>{
    //     if(request.data.body){
    //       this.BindCustomerList = request.data.body.data;
    //       //console.log('this.BindCustomerList',this.BindCustomerList)
    //     }else{
    //       super.$message({
    //         message: request.data.msg,
    //         type: 'warning'
    //       });
    //     }
    //   })
    //   GetUnBindCustomerListById(this.nowUserId,1,1000).then(request=>{
    //     if(request.data.body){
    //       this.UnBindCustomerList = request.data.body;
    //     }else{
    //       super.$message({
    //         message: request.data.msg,
    //         type: 'warning'
    //       });
    //     }
    //   })
    // },
    // addEvent(row){
    //   let List=[row.customerId];
    //   OpUserCustomerAppendById(this.nowUserId,List).then(request=>{
    //     if(request.data.body){
    //       this.getCustomerInfo(this.nowUserId);
    //       this.$message({
    //         message: '添加成功',
    //         type: 'success'
    //       });
    //     }else{
    //       super.$message({
    //         message: request.data.msg,
    //         type: 'warning'
    //       });
    //     }
    //   });
    // },
    // handleSelectionChange(val){
    //   this.selectEventList = val
    // },
    // addSomeEvent(){
    //   let List=[];
    //   for(let i=0;i<this.selectEventList.length;i++){
    //     List[i] = this.selectEventList[i].customerId
    //   }
    //   OpUserCustomerAppendById(this.nowUserId,List).then(request=>{
    //     if(request.data.body){
    //       this.getCustomerInfo(this.nowUserId);
    //       this.$message({
    //         message: '添加成功',
    //         type: 'success'
    //       });
    //     }else{
    //       super.$message({
    //         message: request.data.msg,
    //         type: 'warning'
    //       });
    //     }
    //   });
    // },
    // deleteEvent(row){
    //   let List=[row.customerId];
    //   this.$confirm("是否删除", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       OpUserCustomerRemoveById(this.nowUserId,List).then(request=>{
    //         if(request.data.body){
    //           this.getCustomerInfo(this.nowUserId);
    //           this.$message({
    //             message: '删除成功',
    //             type: 'success'
    //           });
    //         }else{
    //           super.$message({
    //             message: request.data.msg,
    //             type: 'warning'
    //           });
    //         }
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // }
  }
}
</script>
<style scoped>
  #Header{
    background: #f1f3f4;
  }
  #Find{
    margin-left: 1rem;
  }
  #Control{
    margin-top: 0.8rem;
  }
  .dialog-footer{
    margin: 0 auto;
  }
  #targetTable{
    position: absolute;
    top: 0%;
    left:103%;
  }
  /*设置分页属性*/
  #now_line_number{
    font-size: 0.85rem;
    margin-left: 2rem;
    margin-top: 0.6rem;
    color: #606266;
    float:left;
  }
  #paginate{
    float:right;
    margin-right: 2rem;
  }
  #Value{
    line-height: 2.2rem;
    padding-left: 1.2rem;
  }
  #controlPosition{
    display: inline-block;
    position: absolute;
    right: 2rem;
    top: 0;
  }
  #controlBigPosition{
    position: absolute;
    right: 7.2rem;
  }
  #CustomerName{
    line-height: 2.2rem;
    font-size: 1rem;
    padding-left: 0.5rem;
  }
</style>

